
/*****************
 * Xfce4 Desktop *
 *****************/

$text_shadow: 0 0 1px rgba(0, 0, 0, 0.26),
              0 1px 2px rgba(0, 0, 0, 0.32),
              0 2px 3px rgba(0, 0, 0, 0.12);

%panelbutton {
  color: $panel_fg;
  border-radius: 0;
  border: none;
  background-color: transparent;

  &:hover:not(:active):not(:checked) {
    color: $selected_fg_color;
    box-shadow: inset 0 -2px rgba($selected_bg_color, 0.5);
  }
  &:checked {
    color: $selected_fg_color;
    box-shadow: inset 0 -2px $selected_bg_color;
    label, image { color: inherit; }
  }
  &:active {
    background-color: rgba($selected_fg_color, 0.12);
    color: $selected_fg_color;
    box-shadow: inset 0 -2px $selected_bg_color;
  }
}

.xfce4-panel.panel {
  background-color: $panel_bg;
  text-shadow: none;
  -gtk-icon-shadow: none;
  border: none;
  button, button.flat { @extend %panelbutton; }
}

.XfceHeading {
  border: 0 none transparent;
  background-color: $bg_color;
  color: $fg_color;
}

.xfce4-panel {
  background-color: $panel_bg;
  color: $panel_fg;
  font-weight: 700;
  text-shadow: none;
  -gtk-icon-shadow: none;

  &, // unset borders
  frame > border { border: none; }

  &#XfcePanelWindow { // main panel container >= 4.13.3?
    // FIXME: unneeded 1px borders are reserved by its code itself
    border: none;

    &, &.marching-ants { transition: none; } // unset transitions
  }

  button.flat { @extend %panelbutton; }

  button {
    font-weight: 700;
    @extend %panelbutton;

    &#launcher-arrow { // launcher applet
      // FIXME: quite weird pseudo-classe transitions, especially :hover
      // state can't be cleared properly ( -> an upstream issue)
      &, + button.toggle {
        &:hover { box-shadow: none; } // hide indicators
      }

      + button.toggle:checked { // 'arrow' toggle button
        color: $selected_bg_color;
        box-shadow: none;
      }
    }

    &#xfce4-notification-plugin {
      padding: 0 1px; // for 4.12.2
    }
  }

  menu {
    font-weight: 400; // for enforcing regular weight
    text-shadow: none;
    -gtk-icon-effect: none;
  }

  widget.tasklist > button.toggle { font-weight: 400; }
}

//workspaces plugin
window#XfcePanelWindow.background.panel.xfce4-panel {
  border: none;

  > widget {
    wnck-pager {
      background-color: rgba(white, 0.1);
      border: none;
      box-shadow: 0 0 0 1px rgba(white, 0.15);

      &:hover {
        background-color: rgba(white, 0.25);
      }

      &:active, &:checked, &:selected {
        background-color: rgba(white, 0.35);
      }
    }
  }
}

XfdesktopIconView.view {
  border-radius: 2px;
  background: transparent;
  color: $selected_fg_color;
  text-shadow: $text_shadow;

  &:active, &:checked {
    background-color: $selected_bg_color;
    color: $selected_fg_color;
    text-shadow: none;
  }

  .rubberband { @extend rubberband; }
}

$dark_menu_bg: $panel_bg;
$dark_menu_fg: $panel_fg;
$dark_menu_border: rgba(black, 0.20);

%dark_menu_scrollbar {
  background-color: rgba(black, 0.15);
  border-color: darken($dark_menu_bg, 2%);

  &.overlay-indicator:not(.dragging):not(.hovering) slider {
    background-color: $dark_menu_fg;
    border: 1px solid $dark_menu_border;
  }

  slider {
    background-color: rgba(lighten($dark_menu_fg, 15%), 0.65);

    &:hover { background-color: lighten($dark_menu_fg, 20%); }
    &:hover:active { background-color: $selected_bg_color; }

    &:disabled { background-color: transparent; }
  }

  trough { background-color: rgba(black, 0.08); }
}

window#whiskermenu-window {
  background-color: $dark_menu_bg;
  color: $dark_menu_fg;

  // no CSD class even if the sw compositor was enabled.
  > frame > border {
    border-radius: 0;
  }

  button {
    background-color: transparent;
    color: $dark_menu_fg;
    background-clip: padding-box;

    &:hover {
      background-color: rgba($dark_menu_fg, 0.12);
      color: $selected_fg_color;
      border-color: $dark_menu_border;
    }

    &:checked, &:active {
      background-color: $selected_bg_color;
      color: $selected_fg_color;
      border-color: $dark_menu_border;
    }

    &:disabled {
      color: rgba($dark_menu_fg, 0.45);
      border-color: rgba($dark_menu_border, 0.15);
      background-color: rgba($dark_menu_bg, 0.45);
    }
  }

  entry {
    background-color: rgba($dark_menu_fg, 0.1);
    color: $dark_menu_fg;
    border-color: $dark_menu_border;

    image { // icons inside the entry
      color: mix($dark_menu_fg, $dark_menu_bg, 80%);
    }

    &:focus {
      border-color: $selected_bg_color;

      image { color: $selected_bg_color; }
    }

    &:disabled {
      color: rgba($dark_menu_fg, 0.45);
      border-color: rgba($dark_menu_border, 0.15);
      background-color: rgba($dark_menu_bg, 0.45);

      image { color: rgba($dark_menu_fg, 0.45); }
    }
  }

  scrolledwindow {
    // > viewport button.radio {
    //   background-color: $dark_menu_bg;
    //   color: $dark_menu_fg;
    // }

    scrollbar { @extend %dark_menu_scrollbar; }

    .view {
      background-color: rgba(lighten($dark_menu_bg, 5%), 0.9);
      color: $dark_menu_fg;

      // &:hover {
      //   background-color: lighten($dark_menu_bg, 10%);
      // }

      &:selected:hover {
        background-color: lighten($dark_menu_bg, 10%);
        color: $dark_menu_fg;
      }
    }
  }
}

//
//  * Thunar *
//
window.thunar {

  paned.horizontal > separator {
    background-image: image($solid_borders_color);
  }

  .sidebar {
    border: none;

    treeview.view {
      background-color: $bg_color;
      // color: $dark_sidebar_fg;
      //
      // &:hover {
      //   background-color: mix($dark_sidebar_fg, $dark_sidebar_bg, 10%);
      //   box-shadow: none;
      // }

      &:selected, &:selected:hover, &:active:hover { @extend %selected_items; }
    }
  }

  // .sidebar scrollbar { @extend %dark_sidebar_scrollbar }

  toolbar#location-toolbar {
    background-color: $header_bg;
    color: $header_fg;
    // border-bottom: 1px solid darken($header_bg, 2%);

    @if $header == 'light' { box-shadow: inset 0 -1px $borders_color; }

    button { @extend %header_button; }

    // FIXME: need to unset for weird allocation height
    entry { min-height: 0; @extend %header_entry; }

    .linked:not(.vertical):not(.stack-switcher).path-bar {
      button {
        margin: 0;
        padding: 2px 4px 4px 4px;
        @extend %pathbar_box_button;
      }
    }
  }

  notebook {
    // hide unneeded border
    stack > scrolledwindow.frame.standard-view {
      border-top-width: 0;
      border-right-width: 0;
    }

    // an allocation height of label node affects to close button's
    // image height (it's quite weird).
    header.top tab.reorderable-page > box > label { min-height: 0; }
  }
}
